<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/indexs' }">平台</el-breadcrumb-item>
      <el-breadcrumb-item>系统配置</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-button type="primary" @click="addAuthShow()">添加权限</el-button>
        </div>
      </el-col>
    </el-row>

    <el-table :data="authList" style="width: 100%;margin-bottom: 20px;" row-key="id" border
              :tree-props="{children: 'son'}">
      <el-table-column prop="id" label="ID" sortable width="180"></el-table-column>
      <el-table-column prop="auth_name" label="权限名称" sortable width="180"></el-table-column>
      <el-table-column prop="auth_c" label="控制器名"></el-table-column>
      <el-table-column prop="auth_a" label="方法名"></el-table-column>
      <el-table-column prop="is_nav" label="是否菜单">
        <template slot-scope="scope">
          <span v-if="scope.row.is_nav==1">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column prop="level" label="等级">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.level==0" type="success">一级</el-tag>
          <el-tag v-else-if="scope.row.level==1" type="info">二级</el-tag>
          <el-tag v-else-if="scope.row.level==2" type="warning">三级</el-tag>
          <el-tag v-else type="danger">四级</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <i class="el-icon-plus" size="mini" @click="addAuth_t(scope.row)"></i> &nbsp;
          <i class="el-icon-edit" size="mini" @click="showEditAuth(scope.row)"></i> &nbsp;
          <i class="el-icon-delete" size="mini" @click="deleteAuth(scope.row)"></i>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加权限 -->
    <el-dialog :title="title" :visible.sync="isAddAuthShow">
      <el-form :model="addAuthData">
        <el-form-item label="权限名称">
          <el-input v-model="addAuthData.auth_name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上级权限">
          <el-cascader v-model="checkedData" :options="authList"
                       :props="{ expandTrigger:'hover',children:'son',label:'auth_name',value:'id',checkStrictly: true}"
                       @change="ch"></el-cascader>
        </el-form-item>
        <el-form-item label="控制器名">
          <el-input v-model="addAuthData.auth_c" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="操作方法名">
          <el-input v-model="addAuthData.auth_a" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="是否菜单项">
          <el-radio-group v-model="addAuthData.is_nav">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isAddAuthShow = false">取 消</el-button>
        <el-button type="primary" @click="changeAuth()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from "axios";

export default {
  data() {
    return {
      authList: [],
      addAuthData: {
        auth_name: '',
        auth_c: '',
        auth_a: '',
        is_nav: '',
        level: '',
        pid: 0,
        id: 0
      },
      isAddAuthShow: false,
      checkedData: [],
      title: '',
      flag: ''
    }
  },
  methods: {
    async getAuthList() {
      const res = await axios.get('http://adminapi.pyg.com/auths?keyword=&&type=tree');
      // console.log(res);
      var {code, data, msg} = res.data;
      if (code == 200 && msg == 'success') {
        this.authList = data;
      }
    },
    changeAuth() {
      console.log(this.flag);
      if (this.flag == 1) {
        this.addAuth();
      } else if (this.flag == 2) {
        //编辑
        this.editAuth();
      }
    },

    // 添加权限
    addAuthShow() {
      this.title = '添加权限';
      this.flag = 1;
      this.isAddAuthShow = true;
    },
    ch(v) {
      // console.log(v);
      // 要添加权限的pid=上一级权限的id
      this.addAuthData.pid = v[v.length - 1];
    },
    async addAuth() {
      const res = await axios.post('http://adminapi.pyg.com/auths', this.addAuthData);
      var {code, data, msg} = res.data;
      if (code == 200 && msg == 'success') {
        this.$message({message: '添加成功', type: 'success'});
        this.isAddAuthShow = false;
        this.getAuthList();
      }
    },
    addAuth_t(row) {
      this.title = '添加子权限';
      this.flag = 1;
      // console.log(row);
      this.isAddAuthShow = true;
      if (row.pid == 0) { // 如果是0代表在一级下面添加权限
        this.checkedData = [];
        this.checkedData.push(row.id);
      } else {
        var arr = row.pid_path.split('_');
        var num = [];
        // console.log(arr);
        arr.forEach(function (item, index) {
          if (index != 0) {
            num.push(item - 0);
          }
        })
        num.push(row.id);
        this.checkedData = num;
      }
      // this.checkedData = row.id;
      this.addAuthData.pid = row.id;
    },

    // 修改权限
    showEditAuth(row) {
      this.title = '编辑权限';
      this.isAddAuthShow = true;
      this.flag = 2;
      // console.log(row);
      this.addAuthData = row;
      this.checkedData = row.id;
    },
    //编辑
    async editAuth() {
      const res = await axios.put('http://adminapi.pyg.com/auths/' + this.addAuthData.id, this.addAuthData);
      var {code, data, msg} = res.data;
      if (code == 200 && msg == 'success') {
        this.$message({
          message: '修改成功',
          type: 'success'
        });
        this.isAddAuthShow = false;
        this.getAuthList();
      }
      // console.log(res);
    },
    //删除
    async deleteAuth(row) {
      console.log(row);
      if (row.son.length === 0) {
        const res = await axios.delete('http://adminapi.pyg.com/auths/' + row.id, row);
        var {code, data, msg} = res.data;
        if (code == 200 && msg == 'success') {
          this.$message({message: '删除成功', type: 'success'});
          this.getAuthList();
        }
      } else {
        this.$message({message: '有子权限，无法删除', type: 'error'});
      }
    }
  },
  mounted() {
    this.getAuthList();
  }
}
</script>

<style>
.el-row {
  margin-top: 10px;
}
</style>